/* video edit setting css */
.video-edit-article, .create_folder_article{
  background-color: rgb(255 255 255);
  border-radius: .3em;
  max-width: 40rem;
  padding: 0.5rem;
  margin: auto;
  background-color: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
}

.create_folder_article{
  width: 25rem;
}
 
@media only screen and (max-width: 749px){ 
  .create_folder_article{ 
    width: 362.5px !important;
  }
}

@media only screen and (max-width: 379px){ 
  .create_folder_article{
    width: 290px !important;
  }
}

.video-edit-body, .create_folder_body{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  padding: 0 0.5rem 0 0.5rem;
  transform: translate(-50%, -50%);
}

.click_to_close{
  width: 100vw;
  position: fixed;
  top: 0;
  height: 100vh;
  background: transparent;
}

.deleteVideoButtonContainer, .videoTitleEditButtonContainer{
  justify-content: end;
  display: grid;
  margin: auto 0;
  padding: 5px 16px;
}

.deleteVideoContainer, .videoTitleEditContainer, .createFolderButtonsContainer, .createFolderTitleEditContainer{
  display: grid;
  padding: 1rem 1rem 0.5rem 1rem;
}

.createFolderButtonsContainer{
  grid-auto-flow: dense;
  direction: rtl;
  grid-gap: 1ch;
}

.deleteVideoContainer, .videoTitleEditContainer, .createFolderButtonsContainer{
  grid-template-columns: 1fr 1fr;
}

.createFolderTitleEditContainer{
  grid-template-columns: 1fr;
}

.dangerZone-title, .video-edit-form-title, .create-folder-form-title{
  font-weight: 400;
  padding: 1rem 0 1rem 0;
}
.video-edit-form-title, .create-folder-form-title{
  text-align: center;
}
.video_edit_container, .create_folder_container{
  width: 100vw;
  position: fixed;
  top: 0;
  height: 100vh;
  background-color: rgba(0,0,0,0.3) !important;
}

.dangerZone-settingsContainer{
  background-color: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  border-color: #d73a49;
}

.deleteVideoButton, .deleteVideoButton2, .videoTitleEditButton, .cancelCreateFolderButton, .createFolderButton{
  background-color: #fafbfc;
  box-shadow: 0 1px 0 rgba(27,31,35,.04), inset 0 1px 0 hsla(0,0%,100%,.25);
  transition: background-color .2s cubic-bezier(.3,0,.5,1);
  position: relative;
  display: inline-block;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid;
  border-radius: 6px;
  appearance: none;
  border-color: rgba(27,31,35,.15);
}

.deleteVideoButton2{
  color: #fff;
  background-color: #be222e;
}

.deleteVideoButton2:hover{
  color: #cb2431;
  background-color: rgba(178, 178, 178, 0.15);
} 

.deleteVideoButton{
  color: #cb2431;
}

.cancelCreateFolderButton, .createFolderButton{
  height: 2.1875rem;
}

.createFolderButton{  
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  display: inline-flex !important;
  justify-content: center;
  text-decoration: none;
  align-items: center; 
}

.createFolderButton:hover{
  color: #000 !important;
  background: #fff !important; 
}

.videoTitleEditButton, .cancelCreateFolderButton{
  color: #000000;
}

.videoTitleEditButton:hover, .cancelCreateFolderButton:hover, .deleteVideoButton:hover{
  color: rgb(0,0,0);
  background-color: rgba(178, 178, 178, 0.15)
}

.deleteVideoButton:hover, .videoTitleEditButton:hover, .deleteVideoButton2:hover, .cancelCreateFolderButton:hover{
  border-color: rgba(27,31,35,.15);
  box-shadow: inset 0 1px 0 rgba(134,24,29,.2);
}

.backToViewAvailableVideoButton{
    height: 3em !important;
    width: 4em !important;
    font-size: 16px !important;
    padding: 0 !important;
    cursor: pointer;
    display: block !important;
    position: absolute;
    right: 0;
    background: none;
    color: #b3b1b1;
    border: none;
}

.backToViewAvailableVideoButton:hover {
  color: #000;
}

.videoTitleEditInput, .createFolderTitleEditInput{
  width: 100%
}